<template>
  <div class="text-right" style="padding: 12px;" v-if="user.id == 1"><el-link @click="onInsert">新增</el-link></div>
    <el-card style="max-width: 100%" v-if="type == 1" class="gradient-vertical">
      <template #header>
        <div class="card-header">
          <h1>时政要闻 </h1>
        </div>
        <el-divider />
        <div class="mt10" v-for="item in postsData">
          <el-row :gutter="20" >
            <el-col :span="18">
              <ul>
                <li><el-link @click="onSee(item)">{{ item.title }}</el-link></li>
              </ul>
            </el-col>
            <el-col :span="6" class="text-right"><el-text>[{{ item.created_at }}]</el-text></el-col>
          </el-row>
        </div>
      </template>
    </el-card>
    <el-card class="mt30 gradient-vertical" style="max-width: 100%" v-if="type == 2">
      <template #header>
        <div class="card-header">
          <h1>最新公告 </h1>
        </div>
        <el-divider />
        <div class="mt10" v-for="item in newData">
          <el-row :gutter="20">
            <el-col :span="18">
              <ul>
                <li><el-link @click="onSee(item)">{{ item.title }}</el-link></li>
              </ul>
            </el-col>
            <el-col :span="6" class="text-right"><el-text>[{{ item.created_at }}]</el-text></el-col>
          </el-row>
        </div>
      </template>
    </el-card>

    <el-dialog v-model="isShow" width="60%">
      <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" >
          <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <div><TEditor v-model:content="ruleForm.content" /></div>
          </el-form-item>
      </el-form>
      <el-divider />
      <div class="text-center">
          <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
          <el-popconfirm title="确定要删除么?" @confirm="onDelete">
              <template #reference>
                <el-button > 删除 </el-button>
              </template>
          </el-popconfirm>
      </div>
    </el-dialog>

    <el-dialog v-model="isSee" width="50%">
      <h1 class="text-center">{{ info.title }}</h1>
      <el-divider />
      <p class="mt30" v-html="info.content"></p>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import http from '../../../util/request';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import TEditor from '@/components/TEditor.vue'
const type:any = ref(useRouter().currentRoute.value.params.type)
let isUser:any = sessionStorage.getItem('user')
const user = ref<any>(JSON.parse(isUser))

const loading = ref<boolean>(false)
const isShow = ref<boolean>(false)
const isSee = ref<boolean>(false)
  
interface RuleForm {
    id:number
    title: string
    type_id: number
    content: string
}
const ruleFormRef = ref<FormInstance>()
const info = ref<RuleForm>({
    id:0,
    title: '',
    type_id:0,
    content: '',
})
const ruleForm = ref<RuleForm>({
    id:0,
    title: '',
    type_id:0,
    content: '',
})
const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const postsData = ref<any>([])
const newData = ref<any>([])

const onGetData = () => {
    http.post('/posts/board',form.value).then((response:any)=>{
      postsData.value = response.data.postsData
      newData.value = response.data.newData
    })
}

const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
          loading.value = true
          let request:any = null
          if(ruleForm.value.id){
              request = http.patch('/posts',ruleForm.value)
          }else{
              request = http.put('/posts',ruleForm.value)
          }
          request.then((response:any)=>{
              loading.value = false
              if(response.data.code != 200){
                  ElMessage.error(response.data.msg);
                  return
              }
              isShow.value = false
              onGetData();
          })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const onSee = (data:any) => {
  info.value.title = data.title
  info.value.content = data.content
  
  if(user.value.id == 1){
    ruleForm.value.type_id = data.type_id
    ruleForm.value.id = data.id
    ruleForm.value.title = data.title
    ruleForm.value.content = data.content
    isShow.value = true
    return
  }
  isSee.value = true
}


const onInsert = () => {
  ruleForm.value.type_id = type.value
  ruleForm.value.id = 0
  ruleForm.value.title = ''
  ruleForm.value.content = ''
  isShow.value = true
}

const onDelete = () => {
    http.delete('/posts/'+ruleForm.value.id).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        isShow.value = false
        onGetData();
    })
}

onMounted(()=>{
    onGetData()
})
</script>
<style scoped>
ul{padding-left: 30px;}
.gradient-vertical {
  background: linear-gradient(to bottom, #f0dcc6, #FFFFFF);
}
</style>
  